*{
    margin: 0;
    padding: 0;
}

.sea{
    position: fixed;
    bottom: 0px;
}
.wave1{
    position: absolute;
    bottom: 60px;
    height: 70px;
    animation: wave 3s linear infinite;
}
.wave2{
    position: absolute;
    bottom: 30px;
    height: 70px;
    animation: wave 4s linear infinite;
}
.wave3{
    position: absolute;
    bottom: 0px;
    height: 70px;
    animation: wave 2s linear infinite;
}
@keyframes wave {
    50%{
        transform: translate(-50px);

    }
}
.ship{
    position: fixed;
    top: 15%;
    left: 30%;
    animation: ship 3s  infinite;
}
@keyframes ship {
    50%{
        transform:rotate(15deg);
    }
}
.backer{
    position: fixed
}
.fish{
    position: absolute;
    bottom: 20px;
    left: 20px;
    animation: fish 6s linear infinite;
}
@keyframes fish{
    25%{
    transform: translate(380px,-200px);        
    }
    50%{
        transform: translate(520px,-10px);        
    }
    75%{
            transform: translate(650px,-200px);        
    }
    100%{
        transform: translate(1100px,0px);        
    }
}